<template>
    <div class="list-page">
        <tool-bar nav="" title="yapi">
            <el-button @click="view_markdown()">查看markdown {{ $data.list.length }}</el-button>
            <el-button @click="set_to_open()">全部设置为公开</el-button>
        </tool-bar>
        <my-list
            ref="list"
            url="/dev/yapi/list"
            @param="preload"
            @loaded="procData"
            :page-size="10"
            :store="true"
        >
            <el-table-column align="left" label="分类">
                <template v-slot="scope">
                    <el-tag class="link" @click="pop_edit_cat(scope.row.catid)">{{ scope.row.catName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="名称" align="left" min-width="200">
                <template v-slot="scope">
                    <div class="link" @click="edit_click(scope.row)">{{ scope.row.title }}</div>
                </template>
            </el-table-column>
            <el-table-column align="left" label="tags" prop="path" min-width="220">
                <template v-slot="scope">
                    <el-tag v-for="(item,index) in scope.row.tag" :key="item">{{ item }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="left" label="路径" prop="path" min-width="240"></el-table-column>
            <el-table-column align="center" label="总空" prop="emptyColumnCount" width="80"></el-table-column>
            <el-table-column align="center" label="叶子空" prop="leafEmptyColumnCount" width="80"></el-table-column>
            <el-table-column align="center" label="非叶子空" width="80">
                <template v-slot="scope">
                    <div>{{ scope.row.emptyColumnCount - scope.row.leafEmptyColumnCount }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template v-slot="scope">

                    <el-button type="warning" plain round @click="list_add(scope.row)" size="small">
                        <i class="el-icon-plus"></i>markdown
                    </el-button>
                </template>
            </el-table-column>
            <template #query="scope">
                <kv label="组">
                    <selector url="/dev/yapi/groups" :valueIsNumber="false" v-model="scope.query.group"
                              fields="id,name" @change="(v,m,p)=>group_change(v,m,p,scope)" clearable></selector>
                </kv>
                <kv label="项目">
                    <selector url="/dev/yapi/projects" :valueIsNumber="false" v-model="scope.query.project"
                              fields="id,name" @param="v=>v.groupId = scope.query.group"
                              :key="scope.query.group"  clearable></selector>
                </kv>
                <kv label="名称">
                    <el-input v-model="scope.query.name"></el-input>
                </kv>
                <kv label="id">
                    <el-input v-model="scope.query.id"></el-input>
                </kv>
                <kv label="叶子空备注数量">
                    <el-input v-model="scope.query.leafEmptyColumnCount"></el-input>
                </kv>


            </template>
        </my-list>
        <el-dialog v-model="$data.copy_api_dlg" width="80vw" height="80vh" title="移动分类">
            <copy-dlg :source-cat-id="$data.source_cat_id"></copy-dlg>
        </el-dialog>

        <el-dialog v-model="$data.markdown_dlg" width="80vw" height="80vh" title="生成markdown" >
            <div ref="tags">
                <el-tag v-for="item in list" :key="item.title" @close="handleClose(item)" closable :title="item.path">
                    {{ item.title }}
                </el-tag>
            </div>
            <el-input :rows="24" type="textarea" v-model="$data.markdown"></el-input>
        </el-dialog>
    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2021-04-13 19:37:26
 */
import copyDlg from "./yapi-copy-dlg.vue"
import Sortable from 'sortablejs'




defineOptions({
    name: "yapi-list",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"source_cat_id":"","copy_api_dlg":false,"markdown_dlg":false,"markdown":"","list":[]});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const handleClose = function(item) {
    $data.list.removeItem(item);
    view_markdown();
};
const list_add = function(row) {
    $data.list.removeItem(it=> it.id == row.id);
    $data.list.push(row);
    jv.$saveData("list",$data.list);
};
const view_markdown = function() {
    jv.$saveData("list",$data.list);
    $data.markdown_dlg = true;
    $data.markdown = jv.dev.swagger_markdown($data.list);
    var self = this;
    this.sortable && this.sortable.destroy();
    nextTick(() => {
        self.sortable = Sortable.create(this.$refs.tags, {
//  指定父元素下可被拖拽的子元素
            handle: ".el-tag",
            onEnd({newIndex, oldIndex}) {
                const currRow = self.list.splice(oldIndex, 1)[0];
                self.list.splice(newIndex, 0, currRow);
                self.view_markdown();
            }
        });
    });
};
const pop_edit_cat = function(id) {
    $data.copy_api_dlg = true;
    $data.source_cat_id = id;
};
const set_to_open = function() {
    jv.$http.post("/dev/yapi/set-open").then(res => {
        jv.info("已全部设置为公开")
    })
};
const group_change = function(v, m, p, scope) {
    this.$set(scope.query, "project", "")
};
const preload = function(param, callback) {
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
    if (list.value.$el.querySelector(".query").chk() == false) {
        return callback(false);
    }
    if( param.leafEmptyColumnCount > 0 && !param.project){
        jv.error("选空备注的同时也必须选项目");
        return callback(false);
    }
};
const procData = function(res) {
    res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
    });
};
const loadData = function(pageNumber) {
    list.value.loadData(pageNumber);
};
const edit_click = function(row) {
//记录上次点击行
    var rowId = row.id;
    list.value.setLastRow(row);
    window.open(`https://yapi.nancalcloud.com/project/${row.project_id}/interface/api/${rowId}`, "yapi")
};

</script>
